<template lang="html">
    <div id="subject">
        <section class="banner-section">
            <img src="../../img/banner.jpg">
        </section>
        <section class="mune-section">
            <ul>
                <li>
                    <router-link :to='{name:"product"}'>
                        <div class="mune-item">
                            <img src="../../img/product.png">
                            <p>
                                产品中心
                            </p>
                        </div>
                    </router-link>
                </li>
                <li>
                     <router-link :to='{name:"About"}'>
                        <div class="mune-item">
                            <img src="../../img/about.png">
                            <p>
                                关于我们
                            </p>
                        </div>
                     </router-link>
                </li>
                <li>
                    <a>
                        <div class="mune-item">
                            <img src="../../img/cooperative.png">
                            <p>
                                合作伙伴
                            </p>
                        </div>
                    </a>
    
                </li>
                <li>
                    <a>
                        <div class="mune-item">
                            <img src="../../img/honor.png">
                            <p>
                                企业荣誉
                            </p>
                        </div>
                    </a>
                </li>
            </ul>
        </section>
        <section class="news-section">
            <div class="news-header">
                <label class="new-text">
                                          新闻中心
                                      </label>
                <a>
                                          More
                                      </a>
            </div>
            <ul>
                <li class="item">
                    <router-link :to='{name: "Enterprisedetails"}'>
                        <div class="itemimg">
                            <img src="../../img/default.jpg">
                        </div>
                        <div class="text">
                            <div class="title">
                                <h4>助力中国联通</h4>
                            </div>
                            <div class="msg">助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通中国联通</div>
                            <div class="times">
                                2017-12-12
                            </div>
                        </div>
                    </router-link>
                </li>
                <li class="item">
                    <router-link :to='{name: "Enterprisedetails"}'>
                        <div class="itemimg">
                            <img src="../../img/default.jpg">
                        </div>
                        <div class="text">
                            <div class="title">
                                <h4>助力中国联通</h4>
                            </div>
                            <div class="msg">助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通中国联通</div>
                            <div class="times">
                                2017-12-12
                            </div>
                        </div>
                    </router-link>
                </li>
                <li class="item">
                    <router-link :to='{name: "Enterprisedetails"}'>
                        <div class="itemimg">
                            <img src="../../img/default.jpg">
                        </div>
    
                        <div class="text">
                            <div class="title">
                                <h4>助力中国联通</h4>
                            </div>
                            <div class="msg">助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通助力中国联通中国联通</div>
                            <div class="times">
                                2017-12-12
                            </div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </section>
    </div>
</template>

<script>
    import axios from 'axios';
    export default {
        components: {
    
        },
        data() {
            return {
                seachtext: '',
    
            };
        },
    
        //方法
        methods: {
            seach: function() {
                alert()
            }
        }
    }
</script>

<style lang="scss" scoped>
    .banner-section {
        width: 100%;
        height: auto;
    }
    
    
    /**/
    
    .mune-section {
        padding: 16px 0px;
        overflow: hidden;
        border-bottom: 10px solid #ececec;
        li {
            //  display: -webkit-flex; /* Safari */
            //  display: flex;
            width: 25%;
            float: left;
            text-align: center;
            //   justify-content:center;
            //    align-items:center
        }
        .mune-item {
            border-right: 1px solid #e5e5e5;
            box-sizing: border-box;
            img {
                width: 55%;
                margin-bottom: 5px;
            }
            p {
                margin: 0;
                color: #7a7a7a;
                font-size: .92rem;
            }
        }
    }
    
    .mune-section li:last-child .mune-item {
        border-right: none;
    }
    
    
    /**/
    
    .news-header {
        padding: 10px;
        font-size: 0.95rem;
        display: -webkit-flex;
        display: flex;
        justify-content: space-between;
        color: #707070;
        border-bottom: 1px solid #e2e2e2
    }
    
    .new-text {
        border-right: 3px solid #fec201;
        padding-right: 5px;
    }
    
    .news-section ul .item {
        height: 91px;
        position: relative;
        border-bottom: 1px solid #f0f0f0
    }
    
    .news-section ul .item a {
        display: block;
        height: 100%;
    }
    
    .news-section ul .item .itemimg {
        width: 35%;
        float: left;
        height: 80px;
        margin-top: 5px;
        overflow: hidden;
        background: #fff;
        img {
            width: 100%;
            height: 100%;
            width: auto;
            left: 50%;
            position: relative;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            -moz-transform: translateX(-50%);
        }
    }
    
    .news-section .text {
        margin-left: 96px;
        position: relative;
    }
    
    .news-section .text h4 {
        font-size: 15px;
        color: #414a60;
        line-height: 15px;
        font-weight: 400;
        padding-top: 18px;
        margin-right: 90px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0px;
    }
    
    .news-section .text .salary {
        font-style: normal;
        font-size: 15px;
        color: #FC6C38;
        position: absolute;
        right: 19px;
        top: 18px;
        line-height: 15px;
    }
    
    .news-section .text .name {
        font-size: 12px;
        color: #414a60;
        line-height: 28px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin-right: 19px;
    }
    
    .news-section .text .msg {
        line-height: 13px;
        margin-right: 19px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2; //文本行数
        overflow: hidden;
        color: #a9a9a9;
        margin: 5px 0px;
        padding-right: 15px;
    }
    
    .news-section .text .times {
        float: right;
        padding-right: 15px;
        color: #8d8d8d;
    }
</style>
